<template>
  <div>
    <!-- 个人中心头部 -->
    <div class="profile-header">
      <div class="profile-avatar">
        <img v-if="userStoreObject.userInfo.id != null && userStoreObject.userInfo.avatar != null" @click="goToUserDetails()"
          :src="userStoreObject.userInfo.avatar" alt="暂无头像"
        />

        <img v-else-if="userStoreObject.userInfo.id != null && userStoreObject.userInfo.avatar == null" @click="goToUserDetails()"
          src="@/assets/pic/avatar.png" style="height: 130%;" alt="暂无头像"
        />

        <img v-else @click="goToLogin()"
          src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="未登录状态头像"
        />
      </div>
      <div v-if="userStoreObject.userInfo.id != null">
        <div class="profile-name">{{ userStoreObject.userInfo.name }}</div>
        <div class="profile-info">ID: {{ userStoreObject.userInfo.id }}</div>
        <div class="profile-stats">
          <div class="profile-stat">
            <div class="profile-stat-value">128</div>
            <div class="profile-stat-label">关注</div>
          </div>
          <div class="profile-stat">
            <div class="profile-stat-value">256</div>
            <div class="profile-stat-label">粉丝</div>
          </div>
          <div class="profile-stat">
            <div class="profile-stat-value">512</div>
            <div class="profile-stat-label">获赞</div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="profile-info">点击头像登录</div>
      </div>
      
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 我的作品 -->
      <div v-if="userStoreObject.userInfo?.id != null && userStoreObject.userInfo?.isAuthor != 0" class="profile-section">
        <div class="profile-section-header">
          <div class="profile-section-title">我的作品&ensp;
            <svg t="1745128177215" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7854" width="20" height="20">
              <path d="M421.6832 345.4976c6.5536 0 13.1072-2.5088 18.1248-7.4752l13.568-13.568a25.61536 25.61536 0 0 0 0-36.1984 25.61536 25.61536 0 0 0-36.1984 0l-13.568 13.568a25.61536 25.61536 0 0 0 0 36.1984c4.9664 4.9664 11.52 7.4752 18.0736 7.4752z" fill="#44454A" p-id="7855"></path><path d="M866.1504 236.0832l-107.9296-107.9296c-24.1664-24.1664-56.32-37.4784-90.5216-37.4784s-66.3552 13.312-90.5216 37.4784l-0.0512 0.0512-0.0512 0.0512-0.256 0.256-67.7888 67.84c-1.1776 1.1776-2.2016 2.4576-3.1232 3.7888l-39.3216 39.68a25.61536 25.61536 0 0 0 0.1536 36.1984 25.61536 25.61536 0 0 0 36.1984-0.1536l24.3712-24.576c66.3552 67.7376 148.7872 151.9104 213.8624 218.4192l-349.952 349.952a66.6624 66.6624 0 0 1-46.848 19.4048h-0.256l-202.8544-0.8704c-0.8704 0-1.5872-0.3072-2.1504-0.9216a2.9184 2.9184 0 0 1-0.768-2.2016l14.1312-187.136c1.1776-15.7696 8.0384-30.6688 19.2512-41.8816l216.7296-217.344a25.56928 25.56928 0 0 0-0.0512-36.1984 25.56928 25.56928 0 0 0-36.1984 0.0512L135.5264 569.856a117.31456 117.31456 0 0 0-34.048 74.1888l-14.1312 187.136c-1.1264 14.9504 4.0448 29.7984 14.1824 40.8064 10.1376 11.008 24.576 17.3568 39.5264 17.408l202.8544 0.8704h0.4608c30.9248 0 61.184-12.544 83.0464-34.4064l438.7328-438.6816c49.92-49.9712 49.92-131.1744 0-181.0944z m-88.7296 197.376c-65.1776-66.6112-147.712-150.9376-214.016-218.5728l50.0224-50.4832c29.952-29.952 78.6944-29.952 108.5952 0l107.9296 107.9296c29.952 29.952 29.952 78.6432 0 108.5952l-52.5312 52.5312zM902.6048 838.0416H505.088c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h397.4656c14.1312 0 25.6-11.4688 25.6-25.6s-11.4176-25.6-25.5488-25.6z" 
                fill="#44454A" p-id="7856"></path>
              </svg>
          </div>
        </div>
        <div @click="goToWorks(item)" class="list-item" v-for="item in works.slice(0, 2)" :key="item.id">
          <div class="list-item-content">
            <div class="list-item-title">{{ item.title }}</div>
            <div class="list-item-subtitle">{{ item.categoryName }} · {{ item.publishTime }}</div>
          </div>
          <img v-if="item.frontCover" :src="item.frontCover" width="80" height="60"style="border-radius: 6px; object-fit: cover;"/>
        </div>
        <div class="profile-menu-item" @click="goToAllWorks()">
          <div class="profile-menu-content">
            <div class="profile-menu-title">查看全部作品</div>
          </div>
          <div class="profile-menu-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf"></path></svg>
          </div>
        </div>
      </div>

      <!-- 浏览历史 -->
      <div class="profile-section">
        <div class="profile-section-header">
          <div class="profile-section-title">浏览历史&ensp;
            <svg t="1745321660062" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4559" width="20" height="20">
              <path d="M511.73808594 93.19941406c-140.67070313 0-264.92695313 69.1453125-341.01035156 175.08955078v-70.47597656c0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047s-39.346875 17.56318359-39.346875 39.22998047v156.91992188c0 21.66240234 17.61679688 39.22998047 39.346875 39.22998047h170.50341796c21.73007813 0 39.346875-17.56669922 39.346875-39.22998047 0-21.66767578-17.61679688-39.22998047-39.346875-39.22998047h-68.4421875c61.73085937-86.98798828 163.28496094-143.84267578 278.296875-143.84267578 188.32851562 0 341.00507812 152.22128906 341.00507813 339.99345703 0 187.76865234-152.6765625 339.99345703-341.00507813 339.99345703-158.73574219 0-291.74589844-108.29179688-329.75771484-254.70439453l-0.68291016 0.21269531c-5.3015625-15.41162109-19.54248047-26.65986328-36.8024414-26.65986328-21.73007813 0-39.346875 17.56318359-39.346875 39.22558594 0 3.86630859 1.16367187 7.36875 2.20605469 10.89316406l-0.40957032 0.12919922c0.25839844 0.95009766 0.73212891 1.8 0.99580078 2.74482422 0.28916016 0.76201172 0.48164063 1.52314453 0.81650391 2.2640625 49.92539062 175.47011719 210.98935547 304.35380859 402.98378906 304.35380859 231.79394531 0 419.69970703-187.35029297 419.69970703-418.45341797-0.00175781-231.10751953-187.90839844-418.45429688-419.70322265-418.45429687z m0 176.53183594c-21.73007813 0-39.346875 17.56318359-39.346875 39.22998047v235.37988281c0 21.66767578 17.61679688 39.22998047 39.346875 39.22998047h170.50253906c21.73007813 0 39.346875-17.56318359 39.346875-39.22558594 0-21.67119141-17.61679688-39.22998047-39.346875-39.22998047H551.08496094v-196.15429687c0-21.66767578-17.61767578-39.22998047-39.34775391-39.22998047z" 
                p-id="4560"></path>
            </svg>
          </div>
        </div>
        <div @click="goToWorks(item)" class="list-item" v-for="item in history" :key="item.id">
          <div class="list-item-content">
            <div class="list-item-title">{{ item.title }}</div>
            <div class="list-item-subtitle">{{ getNewsCategoriesName(item.categoryId) }} · {{ formatDate(item.publishTime) }}</div>
          </div>
          <img v-if="item.frontCover"
            :src="item.frontCover"
            width="80"
            height="60"
            style="border-radius: 6px; object-fit: cover;"
          />
        </div>
        <div class="profile-menu-item" @click="goToAllHistory()">
          <div class="profile-menu-content">
            <div class="profile-menu-title">查看全部历史</div>
          </div>
          <div class="profile-menu-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf"></path></svg>
          </div>
        </div>
      </div>

      <!-- 我的点赞 -->
      <div class="profile-section">
        <div class="profile-section-header">
          <div class="profile-section-title">我的点赞&ensp;
            <svg t="1745128406520" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9809" width="20" height="20">
                <path d="M190.193225 471.411583c14.446014 0 26.139334-11.718903 26.139334-26.13831 0-14.44499-11.69332-26.164916-26.139334-26.164916-0.271176 0-0.490164 0.149403-0.73678 0.149403l-62.496379 0.146333c-1.425466-0.195451-2.90005-0.295735-4.373611-0.295735-19.677155 0-35.621289 16.141632-35.621289 36.114522L86.622358 888.550075c0 19.949354 15.96767 35.597753 35.670407 35.597753 1.916653 0 3.808746 0.292666 5.649674 0l61.022819 0.022513c0.099261 0 0.148379 0.048095 0.24764 0.048095 0.097214 0 0.146333-0.048095 0.24457-0.048095l0.73678 0 0-0.148379c13.413498-0.540306 24.174586-11.422144 24.174586-24.960485 0-13.55983-10.760065-24.441669-24.174586-24.981974l0-0.393973-50.949392 0 1.450025-402.275993L190.193225 471.409536z" fill="#5D5D5D" p-id="9810"></path><path d="M926.52241 433.948343c-19.283182-31.445176-47.339168-44.172035-81.289398-45.546336-1.77032-0.246617-3.536546-0.39295-5.380544-0.39295l-205.447139-0.688685c13.462616-39.059598 22.698978-85.58933 22.698978-129.317251 0-28.349675-3.193739-55.962569-9.041934-82.542948l-0.490164 0.049119c-10.638291-46.578852-51.736315-81.31498-100.966553-81.31498-57.264215 0-95.466282 48.15065-95.466282 106.126063 0 3.241834-0.294712 6.387477 0 9.532097-2.996241 108.386546-91.240027 195.548698-196.23636 207.513194l0 54.881958-0.785899 222.227314 0 229.744521 10.709923 0 500.025271 0.222057 8.746198-0.243547c19.35686 0.049119 30.239721-4.817726 47.803749-16.116049 16.682961-10.761088 29.236881-25.50079 37.490869-42.156122 2.260483-3.341095 4.028757-7.075139 5.106298-11.20111l77.018118-344.324116c1.056052-4.053316 1.348718-8.181333 1.056052-12.160971C943.643346 476.446249 938.781618 453.944769 926.52241 433.948343zM893.82573 486.837924l-82.983993 367.783411-0.099261-0.049119c-2.555196 6.141884-6.879688 11.596106-12.872169 15.427364-4.177136 2.727111-8.773827 4.351098-13.414521 4.964058-1.49812-0.195451-3.046383 0-4.620227 0l-477.028511-0.540306-0.171915-407.408897c89.323375-40.266076 154.841577-79.670527 188.596356-173.661202 0.072655 0.024559 0.124843 0.049119 0.195451 0.072655 2.99931-9.137101 6.313799-20.73423 8.697079-33.164331 5.551436-29.185716 5.258771-58.123792 5.258771-58.123792-4.937452-37.98001 25.940812-52.965306 44.364417-52.965306 25.304316 0.860601 50.263777 33.656541 50.263777 52.326762 0 0 5.600555 27.563776 5.649674 57.190537 0.048095 37.366026-4.6673 56.847729-4.6673 56.847729l-0.466628 0c-5.872754 30.879288-16.214287 60.138682-30.464849 86.964654l0.36839 0.342808c-2.358721 4.815679-3.709485 10.220782-3.709485 15.943111 0 19.922748 19.088754 21.742187 38.765909 21.742187l238.761895 0.270153c0 0 14.666024 0.465604 14.690584 0.465604l0 0.100284c12.132318-0.638543 24.221658 5.207605 31.100322 16.409738 5.504364 9.016351 6.437619 19.6045 3.486404 28.988218L893.82573 486.837924z" fill="#5D5D5D" p-id="9811"></path><path d="M264.827039 924.31872c0.319272 0.024559 0.441045 0.024559 0.295735-0.024559 0.243547-0.048095 0.367367-0.074701-0.295735-0.074701s-0.539282 0.026606-0.271176 0.074701C264.43409 924.343279 264.532327 924.343279 264.827039 924.31872z" 
                fill="#5D5D5D" p-id="9812"></path>
              </svg>
          </div>
        </div>
        <div @click="goToWorks(item)" class="list-item" v-for="item in likes" :key="item.id">
          <div class="list-item-content">
            <div class="list-item-title">{{ item.title }}</div>
            <div class="list-item-subtitle">{{ getNewsCategoriesName(item.categoryId) }} · {{ formatDate(item.publishTime) }}</div>
          </div>
          <img v-if="item.frontCover"
            :src="item.frontCover"
            width="80"
            height="60"
            style="border-radius: 6px; object-fit: cover;"
          />
        </div>
        <div class="profile-menu-item" @click="goToAllLike()">
          <div class="profile-menu-content">
            <div class="profile-menu-title">查看全部点赞</div>
          </div>
          <div class="profile-menu-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf"></path></svg>
          </div>
        </div>
      </div>

      <!-- 我的收藏 -->
      <div class="profile-section">
        <div class="profile-section-header">
          <div class="profile-section-title">我的收藏&ensp;
            <svg t="1745128490437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11623" width="20" height="20"><path d="M487.05216 60.16L371.21216 295.68c-6.4 13.44-19.84 23.04-35.2 24.96l-266.24 39.04c-10.24 1.28-18.56 7.68-21.76 16.64-3.2 8.96-0.64 17.92 5.76 24.32l195.2 191.36c10.88 10.24 16 24.96 13.44 39.68L216.97216 896c-1.92 8.96 2.56 18.56 10.88 23.68 4.48 3.2 10.24 5.12 16 5.12 5.12 0 9.6-1.28 14.08-3.2l231.68-122.88a49.472 49.472 0 0 1 44.16 0l232.96 122.88a28.032 28.032 0 0 0 29.44-1.92c8.32-5.12 12.8-14.72 10.88-23.68l-45.44-264.32c-2.56-14.72 2.56-29.44 13.44-39.68l195.2-191.36c6.4-6.4 8.96-15.36 5.76-24.32a26.048 26.048 0 0 0-21.76-16.64l-266.24-39.04a46.336 46.336 0 0 1-35.2-24.96L536.97216 60.16A27.52 27.52 0 0 0 512.01216 45.44a27.52 27.52 0 0 0-24.96 14.72zM512.01216 0c28.8 0 55.04 16 67.2 40.32l115.84 235.52 266.24 38.4c27.52 3.84 49.92 22.4 58.88 47.36s1.92 52.48-17.28 71.68l-195.2 190.72 45.44 264.32c4.48 26.88-7.04 53.76-30.72 69.12a76.224 76.224 0 0 1-78.08 3.84L512.01216 839.04l-232.32 122.24a76.224 76.224 0 0 1-78.08-3.84c-23.68-15.36-35.2-42.24-30.72-69.12l45.44-264.32L21.13216 433.28c-19.2-19.2-26.24-46.72-17.28-71.68 8.96-24.96 31.36-43.52 58.88-47.36l266.24-38.4L444.81216 40.32C456.97216 16 483.21216 0 512.01216 0z" 
                p-id="11624"></path>
              </svg>
          </div>
        </div>
        <div class="list-item" v-for="item in favorites" :key="item.id">
          <div class="list-item-content">
            <div class="list-item-title">{{ item.title }}</div>
            <div class="list-item-subtitle">{{ getNewsCategoriesName(item.categoryId) }} · {{ formatDate(item.publishTime) }}</div>
          </div>
          <img v-if="item.frontCover"
            :src="item.frontCover"
            width="80"
            height="60"
            style="border-radius: 6px; object-fit: cover;"
          />
        </div>
        <div class="profile-menu-item" @click="goToAllFavorites()">
          <div class="profile-menu-content">
            <div class="profile-menu-title">查看全部收藏</div>
          </div>
          <div class="profile-menu-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf"></path></svg>
          </div>
        </div>
      </div>


      <!-- 设置菜单 -->
      <div class="profile-section">
        <div
          class="profile-menu-item"
          v-for="menuItem in settingsMenu"
          :key="menuItem.page"
          @click="navigateTo(menuItem.page)"
        >
        <div class="profile-menu-icon" v-html="menuItem.icon"></div>
          <div class="profile-menu-content">
            <div class="profile-menu-title">{{ menuItem.title }}</div>
          </div>
          <div class="profile-menu-chevron">
            <svg t="1742836444128" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1463" width="16" height="16"><path d="M369.5 980.9l-81.8-73.6 354.4-393.8-375-394.7L346.9 43l445 468.5z" p-id="1464" fill="#bfbfbf"></path></svg>
          </div>
        </div>
      </div>

      <!-- 退出登录 -->
      <div v-if="userStoreObject.userInfo?.id != null" class="profile-logout" @click="logout()">退出登录</div>

      <!-- 版本信息 -->
      <div class="profile-version">万象新讯 v1.0.0</div>
    </div>

    <!-- 底部标签栏 -->
    <div class="foot-bar"></div>
    <Foot activeIcon="Profile"/>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted,onActivated, onDeactivated } from 'vue';
import api from '@/api';
import { useRouter } from 'vue-router';
import { UserStore } from '@/stores/userInfoStore';
import { TipStore } from '@/stores/tipStore';
import { NewsStore } from '@/stores/newsInfoStore';
import Foot from '@/components/Foot.vue';


const router = useRouter();
const userStoreObject = UserStore();
const TipStoreObject = TipStore();
const newsStoreObject = NewsStore();

// 数据定义
const News_queryDTO = ref({
  authorId: null,
  status: null,

  current: 1,
  size: 2,
})
const works = ref([])
const likes = ref([])
const favorites = ref([])
const history = ref([])


const settingsMenu = ref([
  { 
    page: '/Settings', 
    icon: '<svg t="1742836607596" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4776" width="20" height="20"><path d="M933.868272 511.691752a140.807706 140.807706 0 0 1 90.131728-131.067068 525.562914 525.562914 0 0 0-57.334136-138.64997 139.882962 139.882962 0 0 1-184.948826-184.948826A525.562914 525.562914 0 0 0 643.067068 0a140.376159 140.376159 0 0 1-262.134136 0A525.562914 525.562914 0 0 0 242.282962 57.334136a139.882962 139.882962 0 0 1-184.948826 184.948826A506.698134 506.698134 0 0 0 0 380.932932a140.376159 140.376159 0 0 1 0 262.134136 525.562914 525.562914 0 0 0 57.334136 138.64997 139.882962 139.882962 0 0 1 184.948826 184.948826 525.562914 525.562914 0 0 0 138.64997 57.334136 140.376159 140.376159 0 0 1 262.134136 0 525.562914 525.562914 0 0 0 138.64997-57.334136 139.882962 139.882962 0 0 1 184.948826-184.948826 506.698134 506.698134 0 0 0 57.334136-138.64997A140.807706 140.807706 0 0 1 933.868272 511.691752zM511.691752 652.437809A140.437809 140.437809 0 1 1 652.437809 511.691752 140.499458 140.499458 0 0 1 511.691752 652.437809z" fill="#1296db" p-id="4777"></path></svg>',
    title: '设置' 
  },
  { 
    page: 'notifications.html', 
    icon: '<svg t="1742837285160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6949" width="20" height="20"><path d="M954.583 783.03h-68.09V442.584c0-194.498-150.274-355.513-340.448-372.86V34.046C546.045 15.32 530.725 0 512 0s-34.045 15.32-34.045 34.045v35.679C287.781 87.07 137.507 248.084 137.507 442.583V783.03h-68.09a34.045 34.045 0 1 0 0 68.09h885.166a34.045 34.045 0 1 0 0-68.09zM512 1024a102.645 102.645 0 0 0 102.662-102.662H409.338A102.645 102.645 0 0 0 512 1024z" p-id="6950" fill="#1296db"></path></svg>', 
    title: '通知设置' 
  },
  { 
    page: 'privacy.html', 
    icon: '<svg t="1742837316550" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8039" width="20" height="20"><path d="M844.8 200.533333L554.666667 55.466667c-25.6-12.8-57.6-12.8-83.2 0L181.333333 200.533333c-34.133333 14.933333-53.333333 46.933333-53.333333 83.2v264.533334c0 121.6 59.733333 236.8 162.133333 315.733333 74.666667 57.6 200.533333 110.933333 204.8 113.066667 4.266667 2.133333 10.666667 4.266667 17.066667 4.266666s10.666667-2.133333 17.066667-4.266666c4.266667-2.133333 132.266667-55.466667 204.8-113.066667 102.4-78.933333 162.133333-194.133333 162.133333-315.733333V283.733333c0-36.266667-19.2-68.266667-51.2-83.2zM554.666667 522.666667v136.533333c0 23.466667-19.2 42.666667-42.666667 42.666667s-42.666667-19.2-42.666667-42.666667v-136.533333c-38.4-17.066667-64-53.333333-64-98.133334 0-59.733333 46.933333-106.666667 106.666667-106.666666s106.666667 46.933333 106.666667 106.666666c0 44.8-25.6 81.066667-64 98.133334z" fill="#1296db" p-id="8040"></path></svg>', 
    title: '隐私与安全' 
  },
  { 
    page: 'help.html', 
    icon: '<svg t="1742837346351" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9215" width="20" height="20"><path d="M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m0 586.666667a32 32 0 1 0 0 64 32 32 0 0 0 0-64z m-2.517333-373.333333c-48.416 0-92.746667 24.16-118.613334 63.413333a137.088 137.088 0 0 0-15.978666 33.237333 32 32 0 0 0 60.906666 19.690667c2.016-6.24 4.885333-12.202667 8.522667-17.717333C458.4 375.914667 482.709333 362.666667 509.482667 362.666667 552.277333 362.666667 586.666667 396.266667 586.666667 437.333333s-34.4 74.666667-77.194667 74.666667a32 32 0 0 0-32 32v64a32 32 0 0 0 64 0v-35.584C603.946667 558.197333 650.666667 503.232 650.666667 437.333333c0-76.757333-63.381333-138.666667-141.194667-138.666666z" fill="#1296db" p-id="9216"></path></svg>', 
    title: '帮助与反馈' 
  },
  { 
    page: 'about.html', 
    icon: '<svg t="1742837415582" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10613" width="20" height="20"><path d="M512 992C246.912 992 32 777.088 32 512 32 246.912 246.912 32 512 32c265.088 0 480 214.912 480 480 0 265.088-214.912 480-480 480z m-59.072-512v236.32a54.144 54.144 0 1 0 108.288 0V480a54.144 54.144 0 1 0-108.288 0z m53.76-226.464c-14.72 0-27.232 4.544-37.568 15.136-11.04 9.856-16.192 22.72-16.192 38.656 0 15.136 5.152 28 16.192 38.624 10.336 10.592 22.848 15.904 37.6 15.904a57.6 57.6 0 0 0 39.04-15.168c10.304-10.592 15.456-23.456 15.456-39.36s-5.12-28.8-15.456-38.656c-10.304-10.56-23.584-15.136-39.04-15.136z" p-id="10614" fill="#1296db"></path></svg>', 
    title: '关于我们' 
  }
]);

// 方法定义
// 获取新闻分类名称
const getNewsCategoriesName = (Id) => {
    if (Id != null) {
        return newsStoreObject.newsCategoryInfo.find(ncInfo => ncInfo.id == Id)?.name;
    } else { return null }
};
// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return '未知';
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

const goToLogin = ()=>{
  router.push({ path: '/Login' });
};

const goToWorks = (news) => {
  router.push({
        path: '/NewsDetails',
        query: { 
            NewsId: news.id,
            newsCategoryName: news.categoryName || getNewsCategoriesName(news.categoryId)
        }
    });
};
const goToAllWorks = ()=>{
  router.push({ path: '/Works' });
}
const goToAllLike = () => {
  if(userStoreObject.userInfo?.id == null){ alert("请先登录"); return; }
  router.push({ path: '/Like' });
};
const goToAllFavorites = () => {
  if(userStoreObject.userInfo?.id == null){ alert("请先登录"); return; }
  router.push({ path: '/Favorite' });
};
const goToUserDetails = () => {
  router.push({ path: '/UserDetails' });
};
const goToAllHistory = () => {
  if(userStoreObject.userInfo?.id == null){ alert("请先登录"); return; }
  router.push({ path: '/History' });
};

const navigateTo = (page) => {
  if (page=='/Settings') {
    router.push({ path: page });
  } else {
    alert('此功能正在开发中');
  }
};

const logout = async() => {
  if (confirm('确定要退出登录吗？')) {
    // 清除登录状态
    await userStoreObject.cleanUserInfo()
    localStorage.removeItem('wx_access-client')
    location.reload(); // 刷新页面
    TipStoreObject.successTip('已退出登录')
  }
};


onMounted(async()=>{
  //console.log("个人中心页被挂载了！")

  if (userStoreObject.userInfo?.id != null && (userStoreObject.userInfo?.isAuthor == 1 || userStoreObject.userInfo?.isAuthor == 2)) { //用户是作者
    //1、查找该用户的作品
    News_queryDTO.value.authorId = userStoreObject.userInfo.id
    api.getNewsInCondition(News_queryDTO.value).then(res => {
      if(res.data.code == 1){
        works.value = res.data.data.list
      }else{
        console.log('获取作品失败')
      }
    }).catch(err => {
      console.log('获取作品失败',err)
    })
  }

  
  if(userStoreObject.userInfo?.id != null){ //用户登录了
    //2、查找该用户的点赞
    api.getNewsByUserLike(userStoreObject.userInfo.id, 1, 2).then(res => {
      if(res.data.code == 1){
        likes.value = res.data.data
      }else{
        console.log('获取点赞作品失败')
      }
    }).catch(err => {
      console.log('获取点赞作品失败',err)
    })

    //3、查找该用户的收藏
    api.getNewsByUserFavorite(userStoreObject.userInfo.id, 1, 2).then(res => {
      if(res.data.code == 1){
        favorites.value = res.data.data
      }else{
        console.log('获取收藏作品失败')
      }
    }).catch(err => {
      console.log('获取收藏作品失败',err)
    })

    //4、查找该用户的浏览记录
    api.getNewsByUserHistory(userStoreObject.userInfo.id, 1, 2).then(res => {
      if(res.data.code == 1){
        history.value = res.data.data
      }else{
        console.log('获取浏览记录失败')
      }
    }).catch(err => {
      console.log('获取浏览记录失败',err)
    })
  }
  
})

//当前组件被用keep-alive缓存了，会有两个新的生命周期函数
onActivated(() => {
  
});
onDeactivated(() => {
    
});


</script>

<style lang="scss" scoped>
.foot-bar{
    height: 80px;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f7;
  color: #333;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
  background-color: #f5f5f7;
  position: sticky;
  top: 0;
  z-index: 100;
}

.status-bar-time {
  font-size: 16px;
  color: #333;
}

.status-bar-icons {
  display: flex;
  gap: 12px;
}

.profile-header {
  background-color: #007aff;
  padding: 24px 16px;
  color: white;
  text-align: center;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  border-radius: 50%;
  margin: 0 auto 16px;
  border: 3px solid white;
  overflow: hidden;
}
.profile-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar svg{
  width: 100%;
  object-fit: cover;
}

.profile-name {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}

.profile-info {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 16px;
}

.profile-stats {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.profile-stat {
  text-align: center;
}

.profile-stat-value {
  font-size: 18px;
  font-weight: 600;
}

.profile-stat-label {
  font-size: 12px;
  opacity: 0.9;
}

.content {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px 16px 18px 16px;
  background-color: #f9f9fa;
}

.profile-section {
  margin-bottom: 16px;
  background-color: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.profile-section-header {
  padding: 16px;
  border-bottom: 1px solid #eaeaea;
}

.profile-section-title {
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.list-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #eaeaea;
}

.list-item:last-child {
  border-bottom: none;
}

.list-item-content {
  flex: 1;
  margin-right: 10px;
  width: 75%;
}

.list-item-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-item-subtitle {
  font-size: 14px;
  color: #8e8e93;
}

.profile-menu-item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid #eaeaea;
  

}

.profile-menu-item:last-child {
  border-bottom: none;
}

.profile-menu-icon {
  width: 24px;
  margin-right: 16px;
  color: #007aff;
  font-size: 18px;
  text-align: center;
  align-items: center; /* 垂直居中对齐 */
  justify-content: center;
  margin-top: 8px;

}

.profile-menu-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中对齐 */
  

}

.profile-menu-title {
  font-size: 16px;
}

.profile-menu-subtitle {
  font-size: 14px;
  color: #8e8e93;
}

.profile-menu-chevron {
  color: #c7c7cc;
  display: flex;
  align-items: center;
}

.profile-logout {
  background-color: #fff;
  padding: 16px;
  text-align: center;
  color: #ff3b30;
  font-weight: 600;
  border-radius: 12px;
  margin-bottom: 16px;
  cursor: pointer;
}

.profile-version {
  text-align: center;
  color: #8e8e93;
  font-size: 12px;
  padding-bottom: 20px;
}


</style>